<template>
  <div class="banner">
    <h3 class="title">轮播管理</h3>
    <div class="toolbar">
      <el-button type="danger" icon="el-icon-plus" size="small" @click="$router.push('add')">添加</el-button>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager">
      <template slot="url" slot-scope="{ row }">
        <el-tooltip :content="row.url">
          <el-link underline icon="el-icon-link" :href="row.url">{{ row.url }}</el-link>
        </el-tooltip>
      </template>
      <template slot="image" slot-scope="{ row }">
        <el-image style="width: 100px; border-radius: 3px;" :src="row.image" />
      </template>
      <template slot="status" slot-scope="{ row }">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="row.status"
          @change="changeStatus(row)"
        />
      </template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { BannerActionsEnum, BannerStatusEnum } from '../../../_/vue/store/banner'
export default {
  mixins: [table],
  data () {
    return {
      tableOptions: [
        { attrs: { label: '排序', prop: 'sort', align: 'center', width: '80px' } },
        { attrs: { label: '图片', prop: 'image', width: '120px' } },
        { attrs: { label: '标题', prop: 'title' } },
        { attrs: { label: '链接', prop: 'url', width: '240px' } },
        { attrs: { label: '状态', prop: 'status', width: '120px', align: 'center' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '120px', align: 'center' },
          buttons: [
            {
              label: '编辑',
              icon: 'el-icon-edit',
              click: ({ row }) => {
                this.$router.push({ path: 'add', query: { id: row.id } })
              }
            },
            {
              label: '删除',
              icon: 'el-icon-delete',
              type: 'popover',
              click: async ({ row }) => {
                await this.delete({ ids: [row.id] })
                this.$message.success('删除成功')
                this.getData()
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: BannerActionsEnum.LIST,
      delete: BannerActionsEnum.DELETE,
      switch: BannerActionsEnum.SWITCH
    }),
    async changeStatus (row) {
      try {
        await this.switch({ id: row.id, status: row.status })
        this.$message.success('操作成功')
      } catch (err) {
        console.log(err)
        row.status = row.status === BannerStatusEnum.DENY ? BannerStatusEnum.ALLOW : BannerStatusEnum.DENY
      }
    }
  }
}
</script>
